<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>flati | responsive html5 template | themeforest | josweb</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">

<link href='http://fonts.googleapis.com/css?family=Lato:400,700,300' rel='stylesheet' type='text/css'>
<!--[if IE]>
	<link href="http://fonts.googleapis.com/css?family=Lato" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:400" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:700" rel="stylesheet" type="text/css">
	<link href="http://fonts.googleapis.com/css?family=Lato:300" rel="stylesheet" type="text/css">
<![endif]-->

<link href="css/bootstrap.css" rel="stylesheet">
<link href="css/font-awesome.min.css" rel="stylesheet">
<link href="css/theme.css" rel="stylesheet">
<link href="css/colour.css" rel="stylesheet" type="text/css"/>
<link href="css/docs.css" rel="stylesheet" type="text/css"/>
<link href="css/zocial.css" rel="stylesheet" type="text/css"/>
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>

<body>
<!--header-->
	<div class="header">
<!--menu-->
    <nav id="main_menu" class="navbar" role="navigation">
      <div class="container">
            <div class="navbar-header">
        <!--toggle-->
			<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#menu">
				<i class="fa fa-bars"></i>
			</button>
		<!--logo-->
			<div class="logo">
				<a href="index.html"><img src="img/logo.png" alt="" class="animated bounceInDown" /></a> 
			</div>
		</div>
           
            <div class="collapse navbar-collapse" id="menu">
                <ul class="nav navbar-nav pull-right">
                   			<li class="dropdown"><a href="javascript:{}">Home</a> 
							<ul class="dropdown-menu">
							<li><a href="index.html">Slider Revolution</a></li>
							<li><a href="index2.html">Nerve Slider</a></li>
							<li><a href="index3.html">NivoSlider</a></li>
							<li><a href="index4.html">Slides</a></li>
							<li><a href="index5.html">Html5 Video</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Pages</a>
						<ul class="dropdown-menu">
								<li><a href="team.html">The Team</a></li>
								<li><a href="about.html">About</a></li>
								<li><a href="services.html">Services</a></li>
								<li><a href="testimonials.html">Testimonials</a></li>
								<li><a href="timeline.html">Timeline</a></li>
								<li><a href="full.html">Full Width</a></li>
								<li><a href="left_sidebar.html">Left Sidebar</a></li>
								<li><a href="right_sidebar.html">Right Sidebar</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Work</a>
						<ul class="dropdown-menu">
								<li><a href="portfolio_2columns.html">2 Columns</a></li>
								<li><a href="portfolio_3columns.html">3 Columns</a></li>
								<li><a href="portfolio_4columns.html">4 Columns</a></li>
								<li><a href="portfolio_masonry.html">Masonry</a></li>
								<li><a href="gallery.html">Paginated Gallery</a></li>
								<li><a href="video_gallery.html">Video Gallery</a></li>
								<li><a href="single_portfolio.html">Single Slider</a></li>
								<li><a href="single_video.html">Single Video</a></li>
								<li><a href="single_image.html">Single Image</a></li>
								<li><a href="full_slider.html">Full Slider</a></li>
								<li><a href="full_video.html">Full Video</a></li>
						</ul>
							</li>
							<li class="dropdown active"><a href="javascript:{}">Style</a>
						<ul class="dropdown-menu">
								<li><a href="scaffolding.html">Scaffolding</a></li>
								<li><a href="shortcodes.html">Shortcodes</a></li>
								<li><a href="icons.html">Icons</a></li>
								<li><a href="script_examples.html">JS Examples</a></li>
								<li><a href="javascript:{}">Sub Menu</a>
							<ul class="dropdown-menu sub-menu">
								<li><a href="#">Sub One</a></li>
								<li><a href="#">Sub Two</a></li>
								<li><a href="#">Sub Three</a></li>
								<li><a href="#">Sub Four</a></li>
							</ul>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Extras</a>
						<ul class="dropdown-menu">
								<li><a href="dribbble_stream.html">Dribbble Stream</a></li>
								<li><a href="alt_footer.html">Alt. Footer & Boxes</a></li>
								<li><a href="pricing_table.html">Pricing Table</a></li>
								<li><a href="404.html">404 Page</a></li>
						</ul>
							</li>
							<li class="dropdown"><a href="javascript:{}">Blog</a>
						<ul class="dropdown-menu">
								<li><a href="blog.html">Blog</a></li>
								<li><a href="blog_two.html">Blog II</a></li>
								<li><a href="blog_post.html">Blog Post</a></li>
								<li><a href="blog_post2.html">Blog Post II</a></li>
						</ul>
							</li>
							<li><a href="contact.html">Contact</a></li>
						</ul>
					</div>
				</div>
			</nav>
		</div>
	<!--//header-->
	
	<!--page-->    
    	<div id="banner">
			<div class="container intro_wrapper">
				<div class="inner_content">
					<h1>Style</h1>
						<h1 class="title">Shortcodes & Illustrations</h1>
							<h1 class="intro">
								Handy shortcodes and a set of scalable vector illustrations kindly provided by <span class="hue">DesignModo</span>.
							</h1>
						</div>
					</div>
				</div>
			<div class="container wrapper pad30">
	<div class="inner_content">  
	
<!-- Buttons ================================================== -->
                <section id="buttons">
                <div class="row">
                 <div class="col-md-6">
					<h1>Buttons</h1>
					<div class="bs-example">
    <button type="button" class="btn btn-default">Default</button>
    <button type="button" class="btn btn-primary">Primary</button>
    <button type="button" class="btn btn-success">Success</button>
    <button type="button" class="btn btn-info">Info</button>
    <button type="button" class="btn btn-warning">Warning</button>
    <button type="button" class="btn btn-danger">Danger</button>
    <button type="button" class="btn btn-link">Link</button>
  </div>
	</div>
				
	<div class="col-md-6">
		<h1>Button sizes</h1>
		<div class="bs-example">
    <p>
      <button type="button" class="btn btn-primary btn-lg">Large button</button>
      <button type="button" class="btn btn-primary">Default button</button>
      <button type="button" class="btn btn-primary btn-sm">Small button</button>
      <button type="button" class="btn btn-primary btn-xs">Extra small button</button>
    </p>
  </div>
	</div>
	</div>
		</section>
	
		<div class="row">
		<div class="col-md-6">

<!-- Labels ================================================== -->
	<section id="labels">
		<h2>Inline labels</h2>
<div class="bs-example">
    <span class="label label-default">Default</span>
    <span class="label label-primary">Primary</span>
    <span class="label label-success">Success</span>
    <span class="label label-info">Info</span>
    <span class="label label-warning">Warning</span>
    <span class="label label-danger">Danger</span>
	<a href="#">Home <span class="badge">42</span></a>
 </div>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;label label-default&quot;</span><span class="nt">&gt;</span>Default<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;label label-primary&quot;</span><span class="nt">&gt;</span>Primary<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;label label-success&quot;</span><span class="nt">&gt;</span>Success<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;label label-info&quot;</span><span class="nt">&gt;</span>Info<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;label label-warning&quot;</span><span class="nt">&gt;</span>Warning<span class="nt">&lt;/span&gt;</span>
<span class="nt">&lt;span</span> <span class="na">class=</span><span class="s">&quot;label label-danger&quot;</span><span class="nt">&gt;</span>Danger<span class="nt">&lt;/span&gt;</span>
</code></pre></div>

<!-- Images ================================================== -->

<div class="bs-docs-example bs-docs-example-images">
<img src="http://placehold.it/105x105" class="img-rounded" alt="">&nbsp;&nbsp;&nbsp;&nbsp;<img src="http://placehold.it/105x105" class="img-circle" alt="">&nbsp;&nbsp;&nbsp;&nbsp;<img src="http://placehold.it/105x105" class="img-polaroid" alt="">
</div>
<br>
<div class="highlight"><pre><code class="html"><span class="nt">&lt;img src="..." class="img-rounded"&gt;
&lt;img src="..." class="img-circle"&gt;
&lt;img src="..." class="img-polaroid"&gt;</span>
</code></pre></div>
</section></div>

<!-- Alerts ================================================== -->

	<div class="col-md-6">
	<section id="alerts">
	<h2>Alerts</h2>
	<div class="bs-example">
    <div class="alert alert-success">
      <strong>Well done!</strong> You successfully read this important alert message.
    </div>
    <div class="alert alert-info">
      <strong>Heads up!</strong> This alert needs your attention, but it's not super important.
    </div>
    <div class="alert alert-warning">
      <strong>Warning!</strong> Better check yourself, you're not looking too good.
    </div>
    <div class="alert alert-danger">
      <strong>Oh snap!</strong> Change a few things up and try submitting again.
    </div>
  </div>

<div class="highlight"><pre><code class="html"><span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;alert alert-success&quot;</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;alert alert-info&quot;</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;alert alert-warning&quot;</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
<span class="nt">&lt;div</span> <span class="na">class=</span><span class="s">&quot;alert alert-danger&quot;</span><span class="nt">&gt;</span>...<span class="nt">&lt;/div&gt;</span>
</code></pre>
</div>
</section>
	<div class="pad45"></div>
		</div>
       
<!-- Icons ================================================== -->	

		<div class="col-md-12"> 	
		<h2>Scalable Vector Icons - Provided by DesignModo </h2>
		<div class="pad15"></div>
		<img src="img/illustrations/calendar.png" class="il" alt="" />
        <img src="img/illustrations/compass.png"  class="il"  alt=""  />
        <img src="img/illustrations/infinity.png" class="il"  alt="" />
        <img src="img/illustrations/map.png" class="il"  alt="" />
        <img src="img/illustrations/paper.png" class="il"  alt="" />
        <img src="img/illustrations/gift.png" class="il"  alt="" />
        <img src="img/illustrations/time.png" class="il"  alt=""/>
		<img src="img/illustrations/clipboard.png" class="il"  alt="" />
        <img src="img/illustrations/bag.png" class="il"  alt="" />
        <img src="img/illustrations/share.png" class="il"  alt="" />
        <img src="img/illustrations/colors.png" class="il" alt="" />
        <img src="img/illustrations/mail.png" class="il" alt="" />
        <img src="img/illustrations/book.png" class="il"  alt="" />
        <img src="img/illustrations/retina.png" class="il"  alt="" />
      </div>
</div>
  <div class="row pad30">


<!-- Pagination ================================================== -->

       <div class="col-md-4">
			<h2>Pagination</h2>
					<div class="pagination">
                        <ul>
                          <li class="disabled"><a href="#">&laquo;</a></li>
                          <li class="active"><a href="#">1</a></li>
                          <li><a href="#">2</a></li>
                          <li><a href="#">3</a></li>
                          <li><a href="#">4</a></li>
                          <li><a href="#">&raquo;</a></li>
                        </ul>
                     </div>
					<ul class="pager">
                        <li class="previous"><a href="#">&larr; Older</a></li>
                        <li class="next"><a href="#">Newer &rarr;</a></li>
                      </ul>
					</div>
					
<!-- Table ================================================== -->

		<div class="col-md-8">
           <h2>Table</h2>
                 <table class="table table-striped">
                     <thead>
                         <tr>
                            <th>#</th>
                            <th>First Name</th>
                            <th>Last Name</th>
                            <th>Username</th>
                          </tr>
                        </thead>
                        <tbody>
                          <tr>
                            <td>1</td>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                          </tr>
                          <tr>
                            <td>2</td>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                          </tr>
                          <tr>
                            <td>3</td>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td>@twitter</td>
                          </tr>
                        </tbody>
                      </table>
                    </div>
				</div>
					</div> 
						</div>
					<div class="pad45 hidden-md hidden-lg"></div>
				<!--//page-->
			
		<!--footer-->
		<div id="footer2">
				<div class="container">
				<div class="row">
				<div class="span12">
				<div class="copyright">
							FLATI
							&copy;
							<script type="text/javascript">
							//<![CDATA[
								var d = new Date()
								document.write(d.getFullYear())
								//]]>
								</script>
							 - All Rights Reserved :
							Template by <a href="http://spiralpixel.com">Spiral Pixel</a>
						</div>
						</div>
					</div>
				</div>
					</div>
				<!-- up to top -->
				<a href="#"><i class="go-top hidden-phone hidden-tablet fa fa-angle-double-up"></i></a>
				<!--//end--> 
				
<script src="js/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/scripts.js"></script>
<script src="js/retina.js"></script>
   </body>
</html>

